<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link rel=StyleSheet href="styles.css" type="text/css">
		<script type="text/javascript"
		    src="http://maps.google.com/maps/api/js?sensor=false">
		</script>
		<script type="text/javascript">
			<!--
				var geocoder;
				var map;
				function initMap() {
					geocoder = new google.maps.Geocoder();
					var latlng = new google.maps.LatLng(-34.397, 150.644);
					var myOptions = {
						zoom: 8,
						center: latlng,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					}
					map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				}

				function codeAddress(strAddress) {
					var address = strAddress;
					geocoder.geocode( { 'address': address}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK) {
						map.setCenter(results[0].geometry.location);
						var marker = new google.maps.Marker({
							map: map,
							position: results[0].geometry.location
						});
					} else {
					}
					});
				}
		  
				function loadPage() {
					initMap();
					populateItemIDBar();
					parseSearchResult();
				}
				
				function makeBid(bid_data) {
					var bids_table = document.getElementById("bids_table");
					
					var row = bids_table.insertRow(-1);
					
					
					row.insertCell(-1).innerHTML = bid_data["Amount"];
					row.insertCell(-1).innerHTML = bid_data["Time"];
					
					var user_cell = row.insertCell(-1);
					user_cell.innerHTML = bid_data["UserID"];
					
					user_cell.addEventListener("mouseover", function() { ShowContent(row.rowIndex - 1, 'user_data'); }, false);
					user_cell.addEventListener("mouseout", function() { HideContent('user_data'); }, false);
				}
				
				function parseSearchResult()
				{
					var json = <%= request.getAttribute("result") %>;
					var bids = <%= request.getAttribute("bids") %>;
					
					if (json["error"]) {
						document.getElementById("error").innerHTML = json["error"];
						
						document.getElementById("results_table").style.display = "none";
					} else {
						document.getElementById("item_name").innerHTML = json["Name"];
						document.getElementById("item_categories").innerHTML = json["Category"];
						
						document.getElementById("item_seller").innerHTML = json["Seller_UserID"];
						
						document.getElementById("item_started").innerHTML = json["Started"];
						document.getElementById("item_ends").innerHTML = json["Ends"];
						
						if (json["Number_of_Bids"] > 0)
							for (var i = json["Number_of_Bids"] - 1; i > -1; i -= 1)
								makeBid(bids[i]);
						else
							document.getElementById("bids_table").insertRow(-1).insertCell(-1).innerHTML = "No bids yet";
						
						document.getElementById("item_description").innerHTML = json["Description"];
					}
				}
				
				function populateItemIDBar() {
					document.itemIDBar.id.value = "<%= request.getParameter("id") %>";
				}
				
				function populatePopup(caller, popup) {
					var json = <%= request.getAttribute("result") %>;
					var bids = <%= request.getAttribute("bids") %>;
					
					if (caller == document.getElementById("item_seller")) {
						document.getElementById("user_rating").innerHTML = json["Seller_Rating"];
						document.getElementById("user_location").innerHTML = json["Location"];
						document.getElementById("user_country").innerHTML = json["Country"];
						
						codeAddress(json["Location"] + ", " + json["Country"]);
					} else {
						document.getElementById("user_rating").innerHTML = bids[caller]["Rating"];
						
						if (bids[caller]["Location"])
							document.getElementById("user_location").innerHTML = bids[caller]["Location"];
						else
							document.getElementById("user_location").innerHTML = "N/A";
						
						if (bids[caller]["Country"])
							document.getElementById("user_country").innerHTML = bids[caller]["Country"];
						else
							document.getElementById("user_country").innerHTML = "N/A";
						
						codeAddress(bids[caller]["Location"] + ", " + bids[caller]["Country"]);
					}
				}
				
				// http://bontragerconnection.com/ and http://willmaster.com/
				// Version: July 28, 2007
				var cX = 0; var cY = 0; var rX = 0; var rY = 0;
			
				function UpdateCursorPosition(e) {
					cX = e.pageX;
					cY = e.pageY;
				}
				
				function UpdateCursorPositionDocAll(e) { 
					cX = event.clientX; 
					cY = event.clientY;
				}
				
				if (document.all) 
				{ 
					document.onmousemove = UpdateCursorPositionDocAll; 
				} else { 
					document.onmousemove = UpdateCursorPosition; 
				}
				
				function AssignPosition(d) {
					if (self.pageYOffset) {
						rX = self.pageXOffset;
						rY = self.pageYOffset;
					} else if (document.documentElement && document.documentElement.scrollTop) {
						rX = document.documentElement.scrollLeft;
						rY = document.documentElement.scrollTop;
					} else if (document.body) {
						rX = document.body.scrollLeft;
						rY = document.body.scrollTop;
					}
					
					if (document.all) {
						cX += rX;
						cY += rY;
					}
					
					d.style.left = (cX + 10) + "px";
					d.style.top = (cY + 10) + "px";
				}
				
				function HideContent(d) {
					if (d.length < 1) 
						return;
					
					document.getElementById(d).style.display = "none";
				}
				
				function ShowContent(caller, d) {
					if (d.length < 1) 
						return;
						
					var dd = document.getElementById(d);
					populatePopup(caller, d);
					AssignPosition(dd);
					dd.style.display = "block";
					document.getElementById("map_canvas").style.display = "block";
				}
				
				function ReverseContentDisplay(d) {
					if (d.length < 1) 
						return;
						
					var dd = document.getElementById(d);
					AssignPosition(dd);

					if (dd.style.display == "none")
						dd.style.display = "block";
					else
						dd.style.display = "none";
				}
				// End code from http://bontragerconnection.com/ and http://willmaster.com/
		
				// http://www.cambiaresearch.com/articles/39/how-can-i-use-javascript-to-allow-only-numbers-to-be-entered-in-a-textbox
				function isNumberKey(evt)
				{
					var charCode = (evt.which) ? evt.which : event.keyCode
					if (charCode > 31 && (charCode < 48 || charCode > 57))
						return false;

					return true;
				}
				// End code from http://www.cambiaresearch.com/articles/39/how-can-i-use-javascript-to-allow-only-numbers-to-be-entered-in-a-textbox
			-->
		</script>
		
		<title>Item Lookup</title>
	</head>
	
	<body id="body" onLoad="loadPage()">
		<div id="user_data">
			<table class="text">
				<tr><td width="100">Rating:</td><td><span id="user_rating" /></td></tr>
				<tr><td width="100">Location:</td><td><span id="user_location" />/></td></tr>
				<tr><td width="100">Country:</td><td><span id="user_country" />/></td></tr>
			</table>
		</div>
	
		<div>
			<form action="/eBay/item" method="GET" name="itemIDBar">
				ItemID:  <input name="id" type="text" onKeyPress="return isNumberKey(event)" />
				<input name="submit" type="submit" value="Find Item" />
			</form>
		</div>
		
		<div class="text" id="error">
		</div>
		
		<table class="text" id="results_table">
			<tbody>
				<tr><td><div class="text" id="item_name" /></td></tr>

				<tr><td><div class="text" id="item_categories" /></td></tr>
				
				<tr><td><br /></td></tr>
				
				<tr>
					<td>
						<table>
							<tr>
								<td class="label" width="200">Seller:</td>
								<td>
									<div id="item_seller" onMouseOver="ShowContent(this, 'user_data'); return true;" onMouseOut="HideContent('user_data'); return true;" />
								</td>
							</tr>
						</table>
					</td>
					
					<td rowspan="5">
						<div id="map_canvas" style="width: 480px; height: 320px;">
						</div>
					</td>
				</tr>
				
				<tr><td><br /></td></tr>
				
				<tr><td>
					<table>
						<tr><td class="label" width="200">Bidding started:</td><td><span id="item_started" /></td></tr>
						<tr><td class="label" width="200">Bidding Ends:</td><td><span id="item_ends" /></td></tr>
					</table>
				<td></tr>
				
				<tr><td><br /></td></tr>
				
				<tr><td>
					<table id="bids_table">
						<thead><td class="label">Bid History:</td></thead>
						<tr>
							<th class="bids_table_label" width="200px">Bid Amount:</th>
							<th class="bids_table_label" width="200px">Bid Placed:</th>
							<th class="bids_table_label" width="200px">Placed By:</th>
						</tr>
					</table>
				</td></tr>
				
				<tr><td><br /></td></tr>
				
				<tr><td class="label">Description:</td></tr>
				<tr><td><div class="text" id="item_description" /></td></tr>
			</tbody>
		</table>
	</body>
</html>
